<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请假信息管理系统 -- 修改班级</title>
    <script src="../../../js/jquery.min.js"></script>
    <link href="../../../css/classManage/editClasses.css" rel="stylesheet">
    <link href="../../../css/common/common.css" rel="stylesheet">
</head>
<body>
<!-- 顶部弹出提示信息容器 -->
<div id="notification" class="notification">
    <span id="message"></span>
</div>
<!-- 头部 -->
<header th:insert="~{common/common::header}">
</header>
<!-- 左边 -->
<aside th:insert="~{common/common::aside}">
</aside>
<!-- 中间 -->
<main class="main">
    <form action="/classes/updateClasses" id="classesFrom">
        <h2 style="margin: 20px 30%;">修改班级信息</h2>
        <input name="oldId" th:value="${classesOne.classID}" style="display: none">
        <div class="form-group">
            <label for="classId">班级编号</label>
            <input type="text" id="classId" name="classID" required th:value="${classesOne.classID}">
        </div>
        <div class="form-group">
            <label for="className">班级名称</label>
            <input type="text" id="className" name="className" required th:value="${classesOne.className}">
        </div>
        <div class="form-group" style="display: none">
            <label for="depId">学院编号</label>
            <input type="text" id="depId" name="depID" required th:value="${classesOne.depID}">
        </div>
        <div class="form-group">
            <label for="major">专业</label>
            <input type="text" id="major" name="major" required th:value="${classesOne.major}">
        </div>
        <div class="form-group">
            <label for="grade">年级</label>
            <input type="text" id="grade" name="grade" required th:value="${classesOne.grade}">
        </div>
        <input type="button" value="返回" onclick="goBack()">
        <input type="button" value="保存提交" onclick="editClasses()">
    </form>

</main>
</body>

<script th:inline="javascript" type="text/javascript">
    function goBack(){
        window.location.href = '/classes/list?pageSize=7&pageNum=1'
    }
    var ids = [[${classesIds}]];
    console.log(ids)
    var oldId = [[${classesOne.classID}]]

    function editClasses(){
        var classId = document.getElementById("classId").value;
        var className = document.getElementById("className").value;
        if(className.length ==0 || className.length > 50 ){
            document.getElementById("message").innerHTML = "课程名称非法，请重新输入";
            this.showNotification();
            return false;
        }
        if(classId.length ==0 || classId > 30 ){
            document.getElementById("message").innerHTML = "课程编号非法，请重新输入";
            this.showNotification();
            return false;
        }

        for(var id in ids){
            console.log(id)
            if(classId === ids[id] && classId != oldId){
                document.getElementById("message").innerHTML = "编号已存在，请重新输入";
                this.showNotification();
                return false;
            }
        }
        document.getElementById("classesFrom").submit();
    }

    function showNotification() {
        const notification = document.getElementById("notification");
        notification.classList.add("show");

        setTimeout(function() {
            notification.classList.remove("show");
        }, 1000); // 3秒后自动消失
    }

    function outLogin(){
        location.href = '/outLogin'
    }
</script>

</html>